JS30-07-Array Cardio Day 2

陣列的操作
some()、every()、find()、findIndex()、slice()、splice()

目標

由二組資料中，根據不同需求條件篩選出正確的資料

- const people = [
  { name: 'Wes', year: 1988 },
  { name: 'Kait', year: 1986 },
  { name: 'Irv', year: 1970 },
  { name: 'Lux', year: 2015 }
  ];
- const comments = [
  { text: 'Love this!', id: 523423 },
  { text: 'Super good', id: 823423 },
  { text: 'You are the best', id: 2039842 },
  { text: 'Ramen is my fav food ever', id: 123523 },
  { text: 'Nice Nice Nice!', id: 542328 }
  ];

實作要點

利用 some()，判斷 people 中是否有 19 歲以上的人。
利用 every()，判斷 people 中是否都 19 歲以上。
利用 find()，找到 comments 中 id 是 823423 的資料。
利用 findIndex()，找出 comments 中 id 是 823423 的索引值。
利用 splice()、slice 刪除 comments 中 id 是 823423 的資料。

實作

判斷 people 中是否有 19 歲以上的人

→ some()

Array.prototype.some()

const ans0 = people.some(p => new Date().getUTCFullYear() - p.year >= 19);
//some() 方法會測試陣列中是否[至少有一個]元素通過由給定之函式所實作的測試。
//若回呼函式在處理任何一個陣列元素時得到 truthy 值，則回傳 true。否則，回傳值為 false。
console.log(ans0);
console.log('↑↑ is at least one person 19 or older? ↑↑');

MDN-Array.prototype.some()

判斷 people 中是否都 19 歲以上

→ every()

Array.prototype.every()

const ans1 = people.every(p => new Date().getUTCFullYear - p.year >= 19);
//every() 方法會測試陣列中的[所有]元素是否都通過了由給定之函式所實作的測試。
//若回呼函式在處理每一個陣列元素時皆得到 truthy 值，則回傳 true。否則，回傳值為 false。
console.log(ans1);
console.log('↑↑ is everyone 19 or older? ↑↑');

MDN-Array.prototype.every()

找到 comments 中 id 是 823423 的資料

→ find()

Array.prototype.find()

//find() 方法會回傳第一個滿足所提供之測試函式的元素值。否則回傳 undefined。
//若元素通過測試則為其值；否則為 undefined。
const ans2 = comments.find(comment => comment.id === 823423);
console.log(ans2);
console.log('↑↑ find the comment with the ID of 823423 ↑↑');

MDN-Array.prototype.find()

找出 comments 中 id 是 823423 的索引值

→ findIndex()

Array.prototype.findIndex()

1
2
3

const ans3 = comments.findIndex(comment => comment.id === 823423);
console.log(ans3);
console.log('↑↑ Find the comment 位置 with this ID of 823423 ↑↑');

MDN-Array.prototype.findIndex()

刪除 comments 中 id 是 823423 的資料

→ slice()

slice 為淺拷貝（shallow copy），不影響原陣列資料(取得新的陣列資料)。

Array.prototype.slice()

const ans4 = comments.slice(0, ans3); //切ans3之前的
const ans5 = comments.slice(ans3 + 1); //切ans3之後的
const ans6 = [...ans4, ...ans5]; //然後再合併  [Spread syntax(展開語法)]
console.log(ans6, comments);
console.log('↑↑ delete the comment with the ID of 823423 (用slice做)   ↑↑');

MDN-Array.prototype.slice()

→ splice()

splice 為直接處理現有的陣列資料

Array.prototype.splice()

const ans8 = comments.splice(ans3, 1); //ans8就是刪掉的東西，沒留就不見了。
console.log(comments);
console.log('↑↑ delete the comment with the ID of 823423 (用splice做) ↑↑');
console.log(ans8);
console.log('↑↑ 被刪掉的東西 ↑↑');

MDN-Array.prototype.splice()